<template>
  <div>
    <h1>组件传值:props</h1>
    <div>
      {{ fTitle }}
      <hr />
      <SonDemo1 :title="`子组件的标题`" :descript="des"></SonDemo1>
      <hr />
      <SonDemo3 :title="`SonDemo3子组件的标题`" :des="sd3Des" :propH="sd3PropsFunc"></SonDemo3>
      <hr />
      <SonDemo2
        :title="`SonDemo2子组件的标题`"
        :des="sd2Des"
        :user="sd2User"
        :propH="sd2PropsFunc"
      ></SonDemo2>
      <hr />
      <SonDemo4 msg="举杯邀明月，对影成三人"></SonDemo4>
      <hr />
      <SonDemo5 msg="举杯邀明月，对影成五人"></SonDemo5>
      <hr />
      <SonDemo6 msg="举杯邀明月，对影成七人"></SonDemo6>
      <hr />
      <SonDemo7 title="床前明月光,国庆回家乡" :user msg="躺尸七天"></SonDemo7>
      <hr />
      <SonDemo8 :user msg="躺尸七天"></SonDemo8>
      <hr />
      <hr />
      <SonDemo9 v-for="item in userArr" :key="item.id" :user="item"></SonDemo9>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { type Iuser } from './components/SonDemo7.vue'

import SonDemo1 from './components/SonDemo1.vue'
import SonDemo2 from './components/SonDemo2.vue'
import SonDemo3 from './components/SonDemo3.vue'
import SonDemo4 from './components/SonDemo4.vue'
import SonDemo5 from './components/SonDemo5'
import SonDemo6 from './components/SonDemo6.vue'
import SonDemo7 from './components/SonDemo7.vue'
import SonDemo8 from './components/SonDemo8.vue'
import SonDemo9 from './components/SonDemo9.vue'

const fTitle = ref('')

const des = 999999999

const sd3Des = ref('传入的des')
const sd3User = ref({
  name: '崔梦娇',
  sex: 0
})
const sd3PropsFunc = (sonTitle: any, fc: Function) => {
  fTitle.value = sonTitle
  fc()
  console.log('这是一个父组件的函数，他被传入了子组件', sonTitle)
}

const sd2Des = ref('传入的des')
const sd2User = ref({
  name: '崔梦娇',
  sex: 0
})
const sd2PropsFunc = (sonTitle: any, fc: Function) => {
  fTitle.value = sonTitle
  fc()
  console.log('这是一个父组件的函数，他被传入了子组件', sonTitle)
}

const user = ref<Iuser>({
  age: 66,
  name: '黄嘉辉',
  sex: '男'
})

const userArr = ref<Iuser[]>([
  {
    id: 1,
    age: 66,
    name: '黄嘉辉',
    sex: '男'
  },
  {
    id: 2,
    age: 22,
    name: '小红',
    sex: '女'
  },
  {
    id: 3,
    age: 33,
    name: '小绿',
    sex: '男'
  }
])
</script>

<style></style>
